import React from "react";
import style from "./index.module.less";
import { PlusOutlined } from "@ant-design/icons";
import { Spin } from "antd";
import { COMURL } from "../../constant";
interface IUpload {
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  isLoading?: boolean;
  imgUrl?: string;
  className?: string;
}
const UploadImg = (props: IUpload) => {
  const { onChange, imgUrl, isLoading, className } = props;

  return (
    <div className={className ? className : style["uploadContainer"]}>
      <input
        style={{ display: "none" }}
        type="file"
        id="imgInput"
        name="uploadImg"
        onChange={(e) => onChange(e)}
        accept="image/*"
      />
      {isLoading ? (
        <Spin></Spin>
      ) : imgUrl ? (
        <img
          src={`${COMURL}${imgUrl}`}
          alt=""
          style={{ width: "100%", height: "100%", borderRadius: "8px" }}
        ></img>
      ) : (
        <label htmlFor="imgInput" className={style["plus"]}>
          <span>
            <PlusOutlined />
          </span>
          <div style={{ marginTop: "4px" }}>upload</div>
        </label>
      )}
    </div>
  );
};

export default UploadImg;
